<template>
  <div class="detail">
    <!-- 头部导航区域 -->
    <div class="header" ref="container">
      <van-sticky :container="container">
        <van-nav-bar
          title="订单详情"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    </div>
    <!-- 顶部订单展示区域 -->
    <div class="mainOrder">
      <van-card
        class="main"
        v-for="order in mainOrder.orderLines"
        :key="order.id"
        :price="order.price + '.00'"
        :desc="order.product.description"
        :title="order.product.name"
        :thumb="order.product.photo"
      >
        <!-- <template #footer>
          <van-button
            round
            size="mini"
            color="linear-gradient(to right, #ec6ead, #3494e6)"
          >
            删除
          </van-button>
        </template> -->
      </van-card>
    </div>
    <van-divider content-position="right"
      >总价:￥{{ mainOrder.total + ".00" }}</van-divider
    >
    <div class="footerDetail">
      <van-card style="line-height: 2">
        <template #tags>
          <span
            >服务地址:
            {{
              mainOrder.address.province +
              mainOrder.address.city +
              mainOrder.address.area +
              mainOrder.address.address
            }} </span
          ><br />
          <span
            >联系方式:{{ mainOrder.customer.realname }}({{
              mainOrder.customer.telephone
            }})</span
          ><br />
          <span
            >下单时间:{{
              moment(mainOrder.orderTime).format("YYYY/MM/DD HH:mm")
            }}</span
          ><br />
          <span
            >服务时间:{{
              moment(mainOrder.serviceTime).format("YYYY/MM/DD HH:mm")
            }}</span
          ><br />
        </template>
      </van-card>
    </div>
    <div style="height: 60px"></div>
  </div>
</template>

<script>
const moment = require("moment");
// 引入axios
import { get } from "@/http/axios";
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      mainOrder: this.$route.query.dindanId,
      moment,
      container: null,
    };
  },
  mounted() {
    this.container = this.$refs.container;
  },
  computed: {},
  methods: {
    //   跳转到订单页面
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {},
};
</script>

<style scoped>
.detail {
  width: 100%;
  height: 100%;
  background-image: url("../Home/y0.jpg");
  background-repeat: repeat;
}
::v-deep .van-nav-bar__title {
  margin-top: 40px;
  font-size: 25px;
  font-family: "华文行楷";
  font-weight: bolder;
  color: white;
}
::v-deep .van-nav-bar__text {
  margin-top: 40px;
  font-size: 16px;
  font-family: "华文行楷";
  color: white;
}
::v-deep .van-icon-arrow-left {
  margin-top: 40px;
  font-size: 16px;
  color: white;
}
.van-nav-bar {
  height: 60px;
  /* background: linear-gradient(to left, #3494e6, #ec6ead); */
  /* background: linear-gradient(to left, #00c9ff, #92fe9d); */
  /* background: linear-gradient(to left, #1fa2ff, #12d8fa, #a6ffcb); */
  background: linear-gradient(to right, #acb6e5, #86fde8);
}
.main {
  margin-top: 20px;
  border-radius: 8px;
  width: 94%;
  margin-left: 3%;
  box-shadow: 2px 2px 2px #acb6e5;
  /* box-shadow: 2px 2px 2px rgba(170, 93, 166, 0.5); */
}
.main:hover {
  margin-top: 20px;
  border-radius: 8px;
  width: 96%;
  margin-left: 2%;
  box-shadow: 2px 2px 2px #86fde8;
}

.van-card {
  margin: 10px auto;
  /* box-shadow: 2px 2px 2px 2px rgba(158, 117, 255, 0.2); */
  box-shadow: 2px 2px 2px #acb6e5;
  transition: 0.3s;
  width: 95%;
  border-radius: 10px;
}
</style>